<template>

  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="选择日期" prop="chenckTime">
        <el-date-picker clearable
                        v-model="dateTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-from-item>
        <div class="timeSpan">
         当前时间： {{nowTime || '加载中....'}}
        </div>
      </el-from-item>
    </el-form>

    <el-table v-loading="loading" :data="paibanData"  >
      <el-table-column label="日期" align="center" prop="dateName"/>
      <el-table-column label="医生1" align="center" prop="doctor1"/>
      <el-table-column>
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="guahao1(scope.row)">挂号</el-button>
        </template>
      </el-table-column>
      <el-table-column label="医生2" align="center" prop="doctor2" />
      <el-table-column>
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="guahao2(scope.row)">挂号</el-button>
        </template>
      </el-table-column>
      <el-table-column label="医生3" align="center" prop="doctor3"/>
      <el-table-column>
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="guahao3(scope.row)">挂号</el-button>
        </template>
      </el-table-column>
      <el-table-column label="医生4" align="center" prop="doctor4"/>
      <el-table-column>
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="guahao4(scope.row)">挂号</el-button>
        </template>
      </el-table-column>

    </el-table>





    <!-- 添加或修改挂号流水表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="guahaoform" :rules="rules" label-width="80px">
        <el-form-item label="病患姓名:" prop="patientName">
          <el-input v-model="guahaoform.patientName" placeholder="请输入病患姓名"/>
        </el-form-item>
        <el-form-item label="身份证号:" prop="patientIdcard">
          <el-input v-model="guahaoform.patientIdcard" placeholder="请输入身份证号"/>
        </el-form-item>
        <el-form-item label="性别:" prop="dickerSex">
          <el-input v-model="guahaoform.dickerSex" placeholder="请输入病患性别"/>
        </el-form-item>
        <el-form-item label="年龄:" prop="patientAge">
          <el-input v-model="guahaoform.patientAge" placeholder="请输入年龄"/>
        </el-form-item>
        <el-form-item label="联系方式:" prop="doctorTel">
          <el-input v-model="guahaoform.doctorTel" placeholder="请输入联系方式"/>
        </el-form-item>
        <el-form-item label="地址:" prop="doctorAdd">
          <el-input v-model="guahaoform.doctorAdd" placeholder="请输入地址"/>
        </el-form-item>
        <el-form-item label="挂号费用:" prop="registrationMoney">
          10元
        </el-form-item>
        <div class="block">
          <el-form-item label="选择科室/医师:">
            <el-select
              v-model="departmentid"
              placeholder="请选择部门"
              @change="changeset"
            >
              <el-option
                v-for="item in departmentlist"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>

            <el-select v-model="personid" placeholder="请选择人员" :disabled="disabled" @change="doctorWork(personid)">
              <el-option
                v-for="item in personlist"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>


          </el-form-item>
        </div>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog title="缴费页面" :visible.sync="addshow" width="20%">
      <div class="demo-image__placeholder">
        <div class="block" align="center">
          <span class="demonstration"><font size="3" color="black">请缴费</font></span>
          <el-image :src="src"></el-image>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
<!--        <el-button @click="addshow = false">取消支付</el-button>-->
        <el-button type="primary" @click="finish">已完成支付</el-button>
      </div>
    </el-dialog>



  </div>

</template>

<script>
import {
  getRegistration,
  delRegistration,
  addRegistration,
  okPayListRegistrations,
  getdeptList,
  getDoctorList,
  listpaiban,
  getDoctorLikeList,
} from '@/api/outpatient/registrationBY'


export default {
  name: 'Registration',
  data() {
    return {
      src: 'https://img1.baidu.com/it/u=1543744943,230774498&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200',
      nowTime: null, // 当前时间
      paibanData:[],
      doctorId:'',
      doctorLists:[],
      addshow:false,
      guahaoform:{},

      value:'',
      PatientStatus:[
        {
          value:'未缴费',
          label:'未缴费'
        },
        {
          value:'已缴费',
          label:'已缴费'
        },
        {
          value:'已就诊',
          label:'已就诊'
        }
      ],
      //部门
      departmentlist: [],
      departmentid: null,
      //人员
      personlist: [],
      personid: null,
      //禁用
      disabled: true,
      deptDoct: [],
      // 遮罩层
      loading: true,
      date:new Date(),
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 挂号流水表表格数据
      registrationList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        patientName: null,
        dickerSex: null,
        patientIdcard: null,
        patientAge: null,
        doctorTel: null,
        doctorAdd: null,
        registrationStarttime: null,
        registrationEndtime: null,
        registrationMoney: null,
        doctorId: null,
        deptId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      dateTime:null,
      id:0,
      tj:{
        id:0,
        date:null,
        time:null
      }
    }
  },
  created() {
    this.getdepartmentlist()
     this.getLists()
    this.getListss()
    this.getDoctorLists()
  },
  mounted() {
    this.$nextTick(() => { // 动态时间展示
      setInterval(this.showTime, 1000);
    });
  },


  methods: {
    finish(){
      this.addshow=false;
      this.$modal.msgSuccess('缴费成功')
    },
    showTime() { // 动态展示现在时间
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      var day = date.getDate();
      day = day < 10 ? "0" + day : day;
      var week = "日一二三四五六".charAt(date.getDay()); // 使用charAt函数提取相应汉字
      var hour = date.getHours();
      hour = hour < 10 ? "0" + hour : hour; // 用三目运算符调整数字显示格式
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      // 加载现在时间
      var current = year + "-" + month + "-" + day + " " + "星期" + week + " " + hour + ":" + minute + ":" + second;
      this.nowTime = current;
    },

    showTimes() {
      this.timeFormate(new Date());
      setInterval(this.showTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.showTimes);
      this.nowTime= null;
    },

    getListss() {
      this.loading = true
      okPayListRegistrations(this.queryParams).then(response => {
        this.registrationList = response.rows
        console.log(this.registrationList)
        this.total = response.total
        this.loading = false
      })
    },
    getLists(){
      this.loading = true
      listpaiban(this.tj).then(response => {
        this.paibanData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    guahao1(row){
      this.tj.id=row.doctor1ID;
      this.tj.date=row.dateName;
      this.tj.time=this.dateTime;
      this.handleAdd();
    },
    guahao2(row){
      this.tj.id=row.doctor2ID;
      this.tj.date=row.dateName;
      this.tj.time=this.dateTime;
      this.handleAdd();
    },
    guahao3(row){
      this.tj.id=row.doctor3ID;
      this.tj.date=row.dateName;
      this.tj.time=this.dateTime;
      this.handleAdd();
    },
    guahao4(row){
      this.tj.id=row.doctor4ID;
      this.tj.date=row.dateName;
      this.tj.time=this.dateTime;
      this.handleAdd()
    },
    deptLikeChange(id){
      this.queryParams.deptId = id
    },


    getDoctorLists(){
      getDoctorLikeList().then(response => {
        this.doctorLists = response.data
        this.loading = false
      })
    },
    doctorChange(doctorId){
      this.queryParams.doctorId = doctorId
    },
    sss(ss){
      this.form.state = ss
    },
    doctorWork(id){
      this.form.doctorId = id
    },

    getdepartmentlist() {
      getdeptList().then(response => {
        this.departmentlist = response.data.data
        this.loading = false
      })
    },
    changeset() {
      this.form.deptId = this.departmentid
      getDoctorList().then(response => {
        let data = response.data.data
        this.loading = false
        //如果部门id不为空
        if (this.departmentid) {
          //切换的时候人员清空，防止bug
          this.personlist = []
          //禁用取消
          this.disabled = false

          data.forEach(item => {

            if (item.departmentid == this.departmentid) {
              this.personlist.push(item)
            }
          })
        } else {
          //选中的部门为空，则清空人员列表
          this.personlist = []
          this.disabled = true

        }
      })
    },


    // /** 查询挂号流水表列表 */
    // getList() {
    //   this.loading = true
    //   listRegistration(this.queryParams).then(response => {
    //     this.registrationList = response.rows
    //     this.total = response.total
    //     this.loading = false
    //   })
    // },
    // 取消按钮
    cancel() {
      this.tj.id=0;
      this.open = false
      this.reset()
      this.departmentid = null
      this.personid = null
    },
    // 表单重置
    reset() {
      this.form = {
        registrationId: null,
        patientName: null,
        dickerSex: null,
        patientIdcard: null,
        patientAge: null,
        doctorTel: null,
        doctorAdd: null,
        registrationStarttime: null,
        registrationEndtime: null,
        registrationMoney: null,
        doctorId: null,
        deptId: null,
        state:null



      }
      this.resetForm('form')
      this.value = []
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.tj.time=this.dateTime;
      this.getLists()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.registrationId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '填写挂号信息'
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const registrationId = row.registrationId || this.ids
      getRegistration(registrationId).then(response => {
        this.form = response.data
        this.value = response.data.state
        this.departmentid = this.form.deptId
        this.open = true
        this.title = '修改挂号表'
      })
    },
    /** 挂号提交按钮 */
    submitForm() {
           console.log(this.guahaoform)
            addRegistration(this.guahaoform).then(response => {
              this.$modal.msgSuccess('挂号成功')
              this.departmentid = null
              this.personid = null
              this.open = false
              this.addshow=true,
              this.getLists()
            })

    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const registrationIds = row.registrationId || this.ids
      this.$modal.confirm('是否确认删除挂号流水表编号为"' + registrationIds + '"的数据项？').then(function() {
        return delRegistration(registrationIds)
      }).then(() => {
        this.getLists()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('outpatient/registration/export', {
        ...this.queryParams
      }, `registration_${new Date().getTime()}.xlsx`)
    }
  }
}


</script>
<style>
.timeSpan{
  text-align: end;
  float: right;
  font-weight: bold;
  color: #0d233c;
  padding-bottom: 10px;
}

</style>

